<template>
	<view class="changePassword">
		<view class="header">
			
			<view class="password">
				<text>当前密码:</text>
				<input class="uni-input" @input='changeBJ = true' :password="showPassword"  type="text"  v-model="password" placeholder='请输入当前密码' placeholder-style="color:#cccccc;font-size:30upx">
			</view>
			<view class="password">
				<text>新密码:</text>
				<input class="uni-input" @input='changeBJ = true' :password="showPassword"  type="text"  v-model="new_password" placeholder='请输入新密码' placeholder-style="color:#cccccc;font-size:30upx">
			</view>
			
			
			
		</view>
			
		<view class="footer">
			<view class="footer_tip">
				<text>密码必须是8~20个英文字母、数字或符合（除空格）</text>
				<label class="radio">
					<radio value="" :checked="!showPassword" color="#FF1268" @click="viewPassword"/>显示密码
				</label>
				
			</view>
			<view class="submit_btn" @click="submit" :class="{'activeBj':changeBJ}">提交</view>
		</view>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util  = require('../../../common/util.js')
export default {
    data() {
        return {
            password: '',
            mobile: uni.getStorageSync('mobile'),
            new_password: '',
            showPassword: true,
            changeBJ: false
        };
    },
    methods: {
        changePassword() {
            uni.showLoading({
                title: '密码更改中...'
            });

            util.ajax(
                'userSetPwd',
                {
                    oldPassword: this.password,
                    password: this.new_password,
                    passwordTry: this.new_password,
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        uni.showToast({
                            title: '密码修改成功',
                            icon: 'none',
                            duration: 600
                        });
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '../../login/index'
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        submit() {
			console.log(this.password)
            if (this.password.length < 8 || this.password.length > 20) {
                uni.showToast({
                    title: '当前密码输入不正确！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            util.ajax(
                'userLogin',
                {
                    mobile: this.mobile,
                    password: this.password
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        if (this.new_password.length < 8 || this.new_password.length > 20) {
                            uni.showToast({
                                title: '请输入8-20位新密码',
                                icon: 'none',
                                duration: 1000
                            });
                            return;
                        }
                        this.changePassword();
                    } else {
                        uni.showToast({
                            title: '当前密码输入不正确！',
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        viewPassword() {
            this.showPassword = !this.showPassword;
        }
    },
    components: {
        uniIcon
    }
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
.changePassword {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
    .header {
        flex-direction: column;
        background: white;
        padding: 0 30upx;
        box-sizing: border-box;
        .password {
            flex-grow: 1;
            border-bottom: 1px solid #eeeeee;
            height: 100upx;
            align-items: center;
            text {
                width: 20%;
				font-size: 30upx;
				color: #000000;
            }
            input {
                padding-left: 30upx;
            }
        }
    }
    .footer {
        padding: 10upx 30upx 0;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;
        .footer_tip {
            flex-direction: column;
            text {
                color: #999999;
                font-size: 26upx;
                padding: 10upx 0;
                box-sizing: border-box;
            }
            label {
				color: #ff1268;
            }
        }
        .submit_btn {
           background: #ff1268;
           color: #ffeeee;
           font-size: 34upx;
           width: 100%;
           height: 100upx;
           justify-content: center;
           align-items: center;
           border-radius: 5upx;
           margin: 100upx auto 0;
           background: -webkit-linear-gradient(to right, #fabde6, #ffa0c2);
           background: -o-linear-gradient(to right, #fabde6, #ffa0c2);
           background: -moz-linear-gradient(to right, #fabde6, #ffa0c2);
           background: -mos-linear-gradient(to right, #fabde6, #ffa0c2);
           background: linear-gradient(to right, #fabde6, #ffa0c2);
        }
		.activeBj {
			background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
			background: -o-linear-gradient(to right, #ff48ac, #ff1268);
			background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
			background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
			background: linear-gradient(to right, #ff48ac, #ff1268);
			color: white;
		}
    }
}
</style>
